<template>
  <dw-menu-datagrid-form
    ref="shellScriptGridRef"
    :init-loaded="false"
    :columns="columns"
    v-model:activeFormData="formData"
    :before-save="beforeSave"
    :data-grid-title="dataGridTitle"
    :render-form-title="renderFormTitle"
    :get-page-http-config="getPageHttpConfig"
    :del-info-http-config="delInfoHttpConfig"
    :del-list-http-config="delListHttpConfig"
    :get-info-http-config="getInfoHttpConfig"
    :add-info-http-config="addInfoHttpConfig"
    :update-info-http-config="updateInfoHttpConfig"
  >
    <template #formSlot>
      <table class="dw-form-table">
        <tbody>
          <tr>
            <td class="dw-td-label"><span class="required">脚本名称</span></td>
            <td>
              <el-form-item
                prop="scriptName"
                :rules="[
                  {
                    required: true,
                    message: '请填写脚本名称!',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.scriptName" placeholder="请填写脚本名称..."></el-input>
              </el-form-item>
            </td>
            <td class="dw-td-label"><span class="required">标签</span></td>
            <td>
              <el-form-item prop="scriptLabels">
                <el-input v-model="formData.scriptLabels" placeholder="请填写脚本名称..."></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="dw-td-label"><span>指令</span></td>
            <td :colspan="3" style="margin: 0; padding: 0">
              <el-alert type="warning" :closable="false">
                <div style="display: flex; justify-content: space-between; width: 100%; align-items: center">
                  <div>调整指令，需要进行保存操作，才能生效</div>
                  <div>
                    <el-button icon="Share" type="primary" @click="addCommand"> 新增指令 </el-button>
                  </div>
                </div>
              </el-alert>
              <el-table :data="formData.shellCommandVOList" :row-key="(row: IShellScriptVO) => row.id" border height="500px" class="table">
                <el-table-column type="index" width="40" align="center" />

                <el-table-column prop="commandName" label="指令名称" width="280">
                  <template #default="{ row }">
                    <el-input class="td-aaa" v-model="row.commandName" placeholder="请填写指令名称" :clearable="true"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="commandContent" label="指令内容">
                  <template #default="{ row }">
                    <el-input class="td-aaa" v-model="row.commandContent" placeholder="请输入指令内容" :clearable="true"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="execCondition" label="执行条件" width="280">
                  <template #default="{ row }">
                    <div style="padding: 0 10px; display: flex; justify-content: space-between; vertical-align: middle; align-items: center">
                      <div>未配置</div>
                      <el-popover placement="left" :visible="conditionVisible" :width="520" :show-arrow="false">
                        <shell-condition-config @ok="conditionConfigOk" @close="conditionVisible = false"></shell-condition-config>
                        <template #reference>
                          <el-icon type="primary" @click="conditionVisible = true"><Setting /></el-icon>
                        </template>
                      </el-popover>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column prop="assertType" label="断言类型" width="120">
                  <template #default="{ row }">
                    <div style="padding: 0 10px; display: flex; justify-content: space-between; vertical-align: middle; align-items: center">
                      <div>未启用</div>
                      <el-popover placement="left" :visible="assertVisible" :width="960" :show-arrow="false">
                        <shell-assert-config @close="assertVisible = false" @ok="assertConfigOk"></shell-assert-config>
                        <template #reference>
                          <el-icon type="primary" @click="assertVisible = true"><Setting /></el-icon>
                        </template>
                      </el-popover>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column prop="operator" label="操作" align="center" width="90">
                  <template #default="{ row }">
                    <el-space>
                      <el-button :icon="Delete" type="danger" @click="delCommand(row)" link> 删除 </el-button>
                    </el-space>
                  </template>
                </el-table-column>
              </el-table>
            </td>
          </tr>
        </tbody>
      </table>
    </template>
  </dw-menu-datagrid-form>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { ISaveShellCommandDTO, ISaveShellScriptDTO, IShellCommandVO, IShellScriptVO } from '../shell-script';
import type { IAddInfoHttpConfig, IDelInfoHttpConfig, IDelListHttpConfig, IGetInfoHttpConfig, IGetPageHttpConfig, IUpdateInfoHttpConfig } from '@/types/menu-datagrid-form';
import { Delete } from '@element-plus/icons-vue';

defineOptions({
  name: 'ShellScriptGrid',
});
const conditionVisible = ref(false);
const assertVisible = ref(false);
import ShellAssertConfig from './shell-assert-config.vue';
import ShellConditionConfig from './shell-condition-config.vue';

const shellScriptGridRef = ref();
const dataGridTitle = 'Shell脚本列表';
const shellCommandList = ref<IShellCommandVO[]>([]);
const formData = ref<IShellScriptVO>({
  id: '',
  categoryId: '',
  scriptName: '',
  scriptLabels: [],
  shellCommandVOList: shellCommandList.value,
  sortNo: 1,
});

const renderFormTitle = (stateValue: 'add' | 'edit', data: IShellScriptVO) => {
  if (stateValue === 'add') {
    return 'Shell脚本信息';
  } else {
    return data.scriptName;
  }
};

const columns = [
  {
    prop: 'scriptName',
    label: '脚本名称',
    width: 200,
  },
  {
    prop: 'scriptLabels',
    label: '标签',
  },
  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
];

const params = ref({
  categoryId: '',
  keyword: '',
});

const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/shell/script/#{id}',
  delInfoMsgEmphasize: '#{scriptName}',
};

const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/shell/script/list',
};

const getPageHttpConfig: IGetPageHttpConfig<IShellScriptVO> = {
  url: '/admin-api/shell/script/page/list',
  query: () => {
    return { categoryId: params.value?.categoryId || '' };
  },
};

const getInfoHttpConfig: IGetInfoHttpConfig<IShellScriptVO> = {
  url: '/admin-api/shell/script/#{id}',
};

const addInfoHttpConfig: IAddInfoHttpConfig<IShellScriptVO> = {
  url: '/admin-api/shell/script',
};

const updateInfoHttpConfig: IUpdateInfoHttpConfig<IShellScriptVO> = {
  url: '/admin-api/shell/script',
};

const loadData = (categoryId: string) => {
  params.value.categoryId = categoryId;
  formData.value.categoryId = categoryId;
  shellScriptGridRef.value.loadData();
};
const setCategoryId = (categoryId: string) => {
  params.value.categoryId = categoryId;
  formData.value.categoryId = categoryId;
};
const beforeSave = (formData: IShellScriptVO, add: boolean): ISaveShellScriptDTO => {
  const saveShellCommandDTOList: ISaveShellCommandDTO[] = [];
  const shellCommandVOList = formData.shellCommandVOList;
  for (let i = 0; i < shellCommandVOList.length; i++) {
    const shellCommandVO = shellCommandVOList[i];
    saveShellCommandDTOList.push({
      id: shellCommandVO.id,
      shellScriptId: formData.id,
      commandContent: shellCommandVO.commandContent,
      commandName: shellCommandVO.commandName,
      assertConfig: shellCommandVO.assertConfig,
      sortNo: i + 1,
    });
  }
  const result: ISaveShellScriptDTO = {
    id: formData.id,
    categoryId: formData.categoryId,
    scriptName: formData.scriptName,
    saveShellCommandDTOList: saveShellCommandDTOList,
  };
  return result;
};

const addCommand = () => {
  formData.value.shellCommandVOList.push({
    id: '',
    shellScriptId: formData.value.id,
    commandName: '',
    commandContent: '',
    assertConfig: '',
    sortNo: 1,
  });
};

const delCommand = (rowdata: IShellCommandVO) => {
  const index = formData.value.shellCommandVOList.findIndex((item) => item.id === rowdata.id); //找到索引
  formData.value.shellCommandVOList.splice(index, 1); //删除
};

const assertConfigOk = () => {
  assertVisible.value = false;
};

const conditionConfigOk = () => {
  conditionVisible.value = false;
};

defineExpose({ loadData, setCategoryId });
</script>
<style lang="scss" scoped>
:deep(.el-alert__content) {
  width: 100%;
}

.table {
  :deep(tbody .cell) {
    padding: 0;
  }
  :deep(tbody .el-table__cell) {
    padding: 0;
    margin: 0;
  }
}
.td-aaa {
  /* 输入框的样式 */
  :deep(.el-input__wrapper) {
    box-shadow: none !important; /* 去掉阴影 */
    border-radius: 0; /* 去掉圆角 */
  }
  /* 选择框的样式 */
  :deep(.el-select__wrapper) {
    box-shadow: none !important; /* 去掉阴影 */
    border-radius: 0; /* 去掉圆角 */
  }
  /* 鼠标悬停时的样式 */
  :deep(.el-input__wrapper:hover) {
    border-bottom: 1px solid var(--el-color-primary); /* 鼠标悬停时下边框高亮 */
  }
  :deep(.el-select__wrapper:hover) {
    border-bottom: 1px solid var(--el-color-primary) !important; /* 鼠标悬停时下边框高亮 */
  }
  /* 聚焦时的样式 */
  :deep(.el-input__wrapper:focus) {
    border-bottom: 1px solid var(--el-color-primary); /* 聚焦时下边框颜色 */
  }
  :deep(.el-select__wrapper:focus) {
    border-bottom: 1px solid var(--el-color-primary); /* 聚焦时下边框颜色 */
  }
}
</style>
